<template>
  <div class="search-form gva-search-box">
    <el-collapse v-model="activeKey">
    <el-collapse-item title="" name="1">
      <el-form
      ref="elSearchFormRef"
      :inline="true"
      :model="searchInfo"
      class="demo-form-inline"
      label-width="auto"
      @keyup.enter="onSubmit"
    >
      <el-row :gutter="24">
        <template v-for="(item, index) in searchList" :key="item.prop">
          <el-col :span="6" v-if="item.show">
            <el-form-item :label="item.label" style="width: 100%">
              <template v-if="item.slot">
                <slot :name="item.slot" :item="item"></slot>
              </template>
              <template v-else>
                  <el-input
                v-model="item.value"
                
                v-if="item.type == 'input'"
                :placeholder="item.placeholder || '请输入'"
                style="width: 100%"
                :clearable="item.clearable !== false"
              />
              <el-date-picker
                v-if="item.type == 'datetimerange'"
                v-model="item.value"
                type="datetimerange"
                style="width: 100%"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DDTHH:mm:ssZ"
                :clearable="item.clearable !== false"
              />
              <el-select
                v-if="item.type == 'select'"
                v-model="item.value"
                placeholder="请选择"
                style="width: 100%"
                :clearable="item.clearable !== false"
              >
                <el-option
                  :label="it.label"
                  :value="it.value"
                  v-for="it in item.selectList"
                  :key="item.value"
                />
              </el-select>
              </template>
             
            </el-form-item>
          </el-col>
        </template>

        <el-col :span="24" style="text-align: right">
          <el-form-item style="margin-right: 0">
            <el-button type="primary" icon="search" @click="onSubmit"
              >查询</el-button
            >
            <el-button icon="refresh" @click="onReset">重置</el-button>
            <el-popover placement="bottom" :width="200" trigger="click">
              <div class="check-all">
                <el-checkbox v-model="checkAll" :label="'全选'" />
              </div>
              <div v-for="(item, index) in searchList" :key="index">
                <el-checkbox v-model="item.show" :label="item.label" />
              </div>
              <template #reference>
                <el-button icon="refresh">筛选查询</el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </el-collapse-item>
  </el-collapse>
  
  </div>
</template>

<script>
import { ref, toRefs, computed, watch, reactive } from "vue";
import { getProductStylesList } from "@/api/plmProductStyles";
export default {
  props: ["searchArr"],
  setup(props, ctx) {
    console.log(ctx);
    const state = reactive({
      searchInfo: {},
      searchList: JSON.parse(JSON.stringify(props.searchArr)),
      productStylesList:[],
      activeKey :'',
    });

    watch(
      () => props.searchArr,
      (newValue) => {
        state.searchList = [...newValue];
      }
    );
    //提交,向外抛出事件
    function onSubmit() {
      const queryArr = state.searchList.filter((item) => item.show);
      const queryParams = {};
      queryArr.map((m) => {
        queryParams[m.prop] = m.value;
      });
      if (queryParams['CreatedAt']) {
        queryParams["startCreatedAt"] = queryParams.CreatedAt[0] || "";
          queryParams["endCreatedAt"] = queryParams.CreatedAt[1] || "";
      }
      if (queryParams['UpdatedAt']) {
        queryParams["startUpdatedAt"] = queryParams.UpdatedAt[0] || "";
          queryParams["endUpdatedAt"] = queryParams.UpdatedAt[1] || "";
      }
      ctx.emit("onSubmit", queryParams);
    }

    // 重置
    const onReset = () => {
      const queryArr = state.searchList.map((item) => {
        item.value = item.defaultValue || null;
        return item;
      });
      state.searchList = queryArr;
      onSubmit();
    };

    // 表头全选、反选
    const checkAll = computed({
      get() {
        return state.searchList.every((item) => {
          return item.show == true;
        });
      },
      set(value) {
        state.searchList.forEach((item) => {
          item.show = value;
        });
      },
    });

    // 获取款式列表
    const remoteMethodProjectStyles = (keyword) => {
      getProductStylesList({
        page: 1,
        pageSize: 50,
        styleNum: keyword ? keyword : undefined,
      }).then((res) => {
        if (res.code == 0) {
          state.productStylesList = res.data.list;
        }
      });
    };

    return {
      ...toRefs(state),
      onSubmit,
      onReset,
      checkAll,
      remoteMethodProjectStyles,
    };
  },
};
</script>

<style lang="scss" scoped>
  .search-form {
    padding: 0 10px !important;
    :deep(.el-collapse) {
      border: 0 solid #000;
      .el-collapse-item__wrap {
        border: 0 solid #000;
      }
      .el-collapse-item__header {
        border: 0 solid #000;
        font-size: 14px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
      }
    }
  }
</style>